<template>
	<view>
		<view class="consult">
			<ul>
				<li v-for="item in yuan" :key="item.id" @click="add(item)">
					&nbsp;&nbsp;
					<span>{{ item.title }}</span>
					<!-- 时间 -->
					<p>{{ moment(item.updatedAt * 1000).format('YYYY-MM-DD HH:mm:ss') }}</p>

				</li>
			</ul>
		</view>
		<!-- 添加加载效果 -->
		<div v-if="isLoading" class="loading">加载中...</div>
	</view>
</template>

<script setup>
	import {reactive,ref,onMounted,onUnmounted} from "vue";
	import {Party} from "@/utils/file.js";
	import {onLoad} from "@dcloudio/uni-app";
	import moment from "moment"
	let id = ref()
	let page = ref(0)
	let yuan = reactive([]);
	let isLoading = reactive(false); // 添加isLoading状态，控制加载效果的显示与隐藏

	onLoad((options) => {
		id.value = options.id;
		console.log(id.value);

		// 获取文章列表
		Party(1, 100, page.value, id.value, uni.getStorageSync('token')) //page:0  num:15
			.then((res) => {
				console.log(res.data.data);
				yuan.push(...res.data.data);
			});
	});

	function add(item) {
		uni.navigateTo({
			url: `../Detail/Detail?id=${item.id}`
		});
	}

	// 监听页面滚动事件，当滚动到页面底部时触发加载更多的操作
	onMounted(() => {
	  if (typeof window !== 'undefined') {
	    const consult = document.querySelector('.consult'); // 获取外层的 <view> 元素
	    consult.addEventListener("scroll", handleScroll);
	  }
	});

	onUnmounted(() => {
		 if (typeof window !== 'undefined') {
		window.removeEventListener("scroll", handleScroll);
		}
	});

	function handleScroll() {
	  const consult = document.querySelector('.consult'); // 获取外层的 <view> 元素
	  if (
	    consult.scrollHeight - consult.scrollTop <=
	    consult.clientHeight
	  ) {
	    loadMore();
	  }
	}
	function loadMore() {
		page.value++; // 增加页数
		isLoading = true; // 显示加载效果

		Party(1, 15, page.value, id.value, uni.getStorageSync('token'))
			.then((res) => {
				console.log(res.data.data);
				yuan.push(...res.data.data);
				isLoading = false; // 隐藏加载效果
			});
	}
</script>


<style lang="scss">
	ul {
		position: relative;
		width: 750rpx;
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			width: 750rpx;
			background-color: #fff;
			font-size: 14px;
			color: #333;
		}

		image {
			position: absolute;
			width: 170rpx;
			height: 170rpx;
			top: 0;
			right: 0;
		}

		p {
			width: 700rpx;
			height: 100rpx;
			color: #bab1b2;
			font-size: 27rpx;
			display: block;
			line-height: 100rpx;
			margin-left: 30rpx;
		}
	}
</style>